<template>
  <div class="input-content">
    <el-input-number
      :placeholder="placeholder"
      v-model.trim="quantityValue"
      @input="handleQuantityChange"
      :disabled="disabled"
      :style="styleValue"
    ></el-input-number>
  </div>
</template>
 
<script>
  export default {
    props: {
      quantity: {
        type: Number,
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: '请输入'
      },
      styleValue: {
        type: String,
        default: 'width: 150px'
      }
    },
    data() {
      return {
        quantityValue: this.quantity
      }
    },
    watch: {
      // 默认显示金额
      quantity(val) {
        this.handleQuantityChange(val)
      }
    },
    methods: {
      handleQuantityChange(val) {
            let value = val
        value = ('' + value)
                .replace(/[^\d]/g, '') 
                .replace(/^0+(\d)/, '$1') 
                .replace(/(\d{20})\d*/, '$1');
        this.quantityValue = Number(value)
       this.$emit('handleQuantityChange', this.quantityValue)
      }
    }
  }
</script>
<style lang='scss' scoped>
.input-content {
  display: inline-block;
}
</style>